<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./js/sethtmlfontSize.js"></script>
    <link rel="stylesheet" href="./css/goods.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/searchhead.css">
    <link rel="shortcut icon" href="../images/logo.ico" type="image/x-icon" />
     <link rel="stylesheet" href="./css/idangerous.swiper.css">
    <title>商品</title>
</head>
    <!--头部-->
     <header class="searchs">
        <div class="search-left">
            <i></i>
        </div>
        <div class="search-center">
            <span class="center-span">商品</span>
            <div class="clears"></div>
            <img class="seacher-img" src="images/triangle_icon_search.png" alt="">
             <input id="search-input" type="text" autofocus>
 
          <div id="classify">
               <i></i>
               <ul class="c-ul">
                   <li><a data-link="goods" href="javascript:void(0)"><img class="classify-img" src="images/goods_icon_search.png" alt=""><span class="classify-span">商品</span></a></li>
                   <li><a data-link="shop" href="javascript:void(0)"><img class="classify-img" src="images/shop_icon_search.png" alt=""><span class="classify-span">商家</span></a></li>
                   <li><a data-link="service" href="javascript:void(0)"><img class="classify-img" src="images/fuwu_icon_search.png" alt=""><span class="classify-span">服务</span></a></li>
               </ul>
           </div>           
        </div>
        <div class="search-right">
           <span id="collect" class="collect"> 搜索</span>
           <span id="login">登录</span>
        </div>
        <div class="clears"></div>    
    </header>
    <div class="goods-page">
        <!--点击搜索，显示历史记录-->
        <div id="centerHistory">
            <p class="p1">历史搜索</p>
            <ul class="history">
                <li><img class="center-img" src="./images/search_icon.png" alt=""><span class="li-span">外卖</span><i></i></li>
            </ul>
            <div class="history-clear">
                <p class="clear-p">清除历史记录</p>
            </div>
        </div> 

        <!--商品banner-->
        <div class="goods-banner swiper-container" >
             <div class="zwl-goodDetail swiper-wrapper">
                <div class="swiper-slide">
                    <ul class="zwl-goodUl">
                    </ul>
                </div>
                 <div class="swiper-slide">
                    <ul class="zwl-goodUl">   
                    </ul>
                </div>

            </div>
            <div class="pagination"></div> 
        </div>
        <!--附近商品-->
        <div class="nears-bg">
            <span>附近商品</span>
        </div>

        <!--商品列表-->
        <div id="goods-lists" class="goods-lists">   
        </div>
        <!--正在加载中-->
        <div class="data-loading hide">加载中.....</div>
    </div>
    <!--底部-->
    <footer id="footer" class="footer">
        <div class="pagenum" style="visibility:hidden;">
            <span class="pre">上一页</span>
            <i id="currentpage" class="currentpage">1</i>
            <span class="next">下一页</span>   
        </div>
        <div class="footer-ul">
           <ul>
               <li class="first"><a href="./index.html">首页</a></li>
               <li class="li login"><a href="javascript:void(0);">登录</a></li>
               <li class="li"><a href="http://www.shidiquan.cn/indexPhone.html">客户端</a></li>
               <li class="li"><a href="javascript:void(0);">电脑版</a></li>
               <li class="li"><a href="http://www.shidiquan.cn">帮助</a></li>
           </ul>
       </div>
    </footer>
    
    
    <!--悬浮下载app-->
    <div id="download-app" class="download-app">
        <div id="down-content" class="down-content">
            <img class="close" id="close" src="./images/close_icon.png" alt="">
            <div class="down-left l">
                <img src="./images/logo.png" alt="">
            </div>
            <div class="down-center l">
                <p class="unmgntop">下载实地圈客户端</p>
                <p class="mgntop">兼职推广，在家创业，躺着赚钱</p>
            </div>
            <div class="down-right l">
                <span class="">免费下载</span>
            </div>
            <div class="clears"></div>
        </div>
        
    </div>
    <!--回到顶部-->
    <div id="back-top" class="back-top">
        <img src="./images/back_top_icon.png" alt="回到顶部">      
    </div>
    
<body>
    
</body>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="./js/pub_page.js"></script>
<script src="./js/goods.js"></script>
<script src='./js/idangerous.swiper.min.js'></script>
<script>
    var mySwiper = new Swiper ('.swiper-container',{
    pagination: '.pagination',
    paginationClickable: true
  });
    $(function(){
         //点击搜索框显示搜索历史记录
        $("#search-input").on("click",function(){
            $("#center").css("display","block");
        });
        
         $(".search-center .center-span,.search-center .seacher-img").on("click",function(){
            $("#classify").toggle(); 
        });
        //清除历史记录
        $(".clear-p").on("click",function(){
            $(".history").html("");
        });
    });    
</script>
</html>